'use client'
import { adminHouseholdAdd, adminHouseholdDelete, adminHouseholdList, adminHouseholdUpdate } from '@/service'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { Button, Col, Divider, Form, Input, Modal, Popconfirm, Row, Select, Space, Table, Typography, message } from 'antd'
import React, { useEffect, useRef, useState } from 'react'

export default function page() {
  // 状态变量，保存列表
  const [list,setList] = useState([])
  // 状态变量，保存总数据量
  const [total,setTotal] = useState(0)
  // 状态变量，用于重新请求数据
  const [pno, setPno] = useState(1)
  // 状态变量，保存输入的搜索关键字
  const [kw,setKw] = useState('')
  // 状态变量，用于触发生命周期函数
  const [a, setA] = useState(0)
  // 状态变量，用于控制模态框显示/隐藏
  const [open, setOpen] = useState(false)
  // 状态变量，用于保存模态框的标题
  const [title, setTitle] = useState('')
  // 创建表单实例,用于访问表单
  const [myForm] = Form.useForm()
  // 创建表单的引用
  const formRef = useRef()
  // 状态变量，保存要修改的用户id
  const [id, setId] = useState('')

  // 页面加载后，请求获取居民数据
  useEffect(() => {
    ;(async () => {
      const res = await adminHouseholdList(pno,kw)
      console.log(res)
      // 保存数据列表
      setList(res.data)
      // 保存总数据量
      setTotal(res.recordCount)
    })()
  }, [pno,a])

  return (
    // direction 控制间距方向 horizotal/vertial
    // size 间距大小 
    <Space direction='vertical' style={{width: '100%'}}>
      <Typography.Title level={5}>人口信息</Typography.Title>
      <Row>
        <Col span={24}>
          <Form
            layout='inline'  // 表单项成一行展示
            onFinish={({uname}) => {
              console.log(uname)
              // 将用户输入的值作为请求接口的关键字参数
              setKw(uname)
              // 重新请求，只需要改变依赖的数据a
              setA(a+1)
            }}
          >
            <Form.Item name='uname'>
              <Input placeholder='请输入人员姓名' />
            </Form.Item>
            <Form.Item>
              <Button type='primary' htmlType='submit'>查询</Button>
            </Form.Item>
            <Form.Item>
              <Button 
                type='primary'
                onClick={() => {
                  // 打开模态框
                  setOpen(true)
                  // 设置模态框变通
                  setTitle('添加人口')
                }}
              >添加</Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      {/* 数据展示 */}
      <Table 
        // 分页器
        pagination={{
          total,   //总数据量
          //监听当前页码和每页数据量变化
          onChange: (pageNum,pageSize) => {  
            // pageNum 当前的页码  pageSize 每页数据量
            console.log(pageNum)
            setPno(pageNum)
          }
        }}
        // 指定一条数据中的某个属性作为key值，通常使用id
        rowKey='hid'
        // 数据,放接口返回的数据
        dataSource={list}
        // 表头
        columns={[
          // title  表头列名称
          // dataIndex 和每条数据的属性名对应，用于数据渲染
          // key 区分唯一性
          {title: '序号', dataIndex: 'hid', key: 'hid'},
          {title: '业主编号', dataIndex: 'householdId', key: 'householdId'},
          {title: '业主姓名', dataIndex: 'householdName', key: 'householdName'},
          {
            title: '性别', 
            dataIndex: 'gender', 
            key: 'gender',
            // 用于改变渲染的数据格式
            render: (text, record) => {
              // text 行里边的值
              // record 当前这行数据
              // console.log(record)
              return record.gender === '1' ? '男' : '女'
            }
          },
          {title: '联系方式', dataIndex: 'phone', key: 'phone'},
          {title: '地址', dataIndex: 'householdAddr', key: 'householdAddr'},
          {
            title: '操作', 
            dataIndex: 'op', 
            key: 'op',
            render: (text,record) => {
              return <Space>
                <Button 
                  type='primary' 
                  icon={<EditOutlined />}
                  onClick={() => {
                    // 保存当前这条数据的id
                    setId(record.hid)
                    // 打开模态框
                    setOpen(true)
                    // 设置模态框标题为修改人口信息
                    setTitle('修改人口信息')
                    // 将当前这条数据传递给表单
                    myForm.setFieldsValue(record)
                  }}
                />
                {/* 气泡确认框 */}
                <Popconfirm
                  title='警告！'
                  description='您确认要删除这条数据吗'
                  okText='确定'
                  cancelText='取消'
                  onConfirm={async () => {
                    // 删除这条数据
                    const data = await adminHouseholdDelete(record.hid)
                    if(data.code === 2000) {
                      message.success('删除成功')
                      setA(a+1)
                    } else {
                      message.error('删除失败')
                    }
                  }}
                >
                  <Button type='primary' danger icon={<DeleteOutlined />} />
                </Popconfirm>
                
              </Space>
            }
          },
        ]}
      />

      {/* 模态框：添加用户 */}
      <Modal 
        // 关闭模态框销毁内容
        destroyOnClose
        title={title}
        open={open}
        // 点击取消关闭模态框
        onCancel={() => setOpen(false)}
        // 点击确定，提交表单
        onOk={() => formRef.current.submit()}
        cancelText='取消'
        okText='确定'
      >
        <Divider />
        <Form
          // 当字段被删除时不保留字段值
          preserve={false}
          // 用于访问表单
          form={myForm}
          ref={formRef}
          labelCol={{span: 4}}
          wrapperCol={{span: 20}}
          onFinish={async (values) => {
            // console.log(values)
            // 判断是修改还是添加
            if(id) { //修改
              // 修改数据，添加上修改的条件
              const data = await adminHouseholdUpdate({...values,hid: id})
              console.log(data)
              if(data.code === 2000) {
                message.success('人口修改成功',3)
              } else {
                message.error('人口修改失败')
              }
              // 修改成功后，要把id清空
              setId('')
            } else {  //添加
              // 发送请求，添加人口
              const data = await adminHouseholdAdd(values)
              // 判断是否成功
              if(data.code === 2000) {
                message.success('人口添加成功',3)   
              } else {
                message.error('人口添加失败')
              }
            }
            // 关闭模态框
            setOpen(false)
            // 更新数据
            setA(a+1)
          }}
        >
          <Form.Item label='居民户号' name='householdId' rules={[
            {required: true, message: '居民户号不能为空'}
          ]}>
            <Input placeholder='请输入居民户号' />
          </Form.Item>
          <Form.Item label='人员姓名' name='householdName' rules={[
            {required: true, message: '人员姓名不能为空'}
          ]}>
            <Input placeholder='请输入人员姓名' />
          </Form.Item>
          <Form.Item label='性别' name='gender' initialValue='女'>
            <Select  
              // 别名设置
              fieldNames={{
                label: 'gender'
              }}
              options={[
                {value: 0, gender: '女'},
                {value: 1, gender: '男'}
              ]}
            />
          </Form.Item>
          <Form.Item label='身份证号' name='idNum' rules={[
            {required: true, message: '身份证号不能为空'}
          ]}>
            <Input placeholder='请输入身份证号' />
          </Form.Item>
          <Form.Item label='联系方式' name='phone' rules={[
            {required: true, message: '联系方式不能为空'}
          ]}>
            <Input placeholder='请输入联系方式' />
          </Form.Item>
          <Form.Item label='住址' name='householdAddr' rules={[
            {required: true, message: '住址不能为空'}
          ]}>
            <Input.TextArea placeholder='请输入住址' />
          </Form.Item>
        </Form>
        <Divider />
      </Modal>
    </Space>
  )
}
